import { useState, useEffect } from 'react';
import { ToastAndroid, Dimensions, FlatList, StyleSheet, TouchableOpacity, Text, TextInput, View, Image, ImageBackground, ScrollView } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { AntDesign } from '@expo/vector-icons';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import { FontAwesome } from '@expo/vector-icons';
import AsyncStorage from '@react-native-async-storage/async-storage';
import moment from 'moment';
import axios from 'axios';
import { baseURL, useAuth } from '../../context/AuthProvider'

const { width, height } = Dimensions.get('window');

const Topic = ({ navigation, route }) => {
    const { user } = useAuth();
    const [list, setList] = useState([]);
    const [plant, setPlant] = useState({});
    const toPlant = () => {
        // navigation.navigate('plantImage');
        axios.post('/guide/selectplant', {
            cropname: plant.cropname
        }).then(res => {
            console.log(res);
            if (res.code == 200) {
                navigation.navigate('plantImage', {
                    images: res.data,
                    imgs: res.imgs
                });
            }
        })
    }
    const newsComment = (e) => {
        navigation.navigate('newsComment', {
            newsid: e
        });
        console.log(e);
    }
    const deleteNews = (id) => {
        console.log(id);
        axios.post('/news/deletenews', {
            newsid: id
        }).then(res => {
            console.log(res);
            if (res.code == 200) {
                axios.post('/news/topicnews', {
                    cropsid: route.params.cropsid
                }).then(res => {
                    console.log(res);
                    if (res.code == 200) {
                        setList(res.data);
                    }
                })
                ToastAndroid.show("删除成功", 2000);
            }
        })
    }
    useEffect(() => {
        AsyncStorage.getItem('topic').then(
            data => {
                if (data) {
                    setPlant(JSON.parse(data))
                }
            }
        )
        axios.post('/news/topic', {
            cropsid: route.params.cropsid
        }).then(res => {
            // console.log(res);
            if (res.code == 200) {
                AsyncStorage.setItem('news', JSON.stringify(res.data[0]))
                setPlant(res.data[0]);
            }
        })
        axios.post('/news/topicnews', {
            cropsid: route.params.cropsid
        }).then(res => {
            console.log(res);
            if (res.code == 200) {
                setList(res.data);
            }
        })
    }, [])
    const Header = () => (
        <View style={{ width: '100%' }}>
            <View style={{ height: 132, alignItems: 'center' }}>
                <ImageBackground
                    style={{ flex: 1, width: width, height: 135, }}
                    source={require('../../../images/news/bg3.jpg')}
                >
                    <View style={{ flexDirection: 'row', height: 132, alignItems: 'center' }}>
                        {plant.cropimg ?
                            <Image
                                style={{ width: 100, height: 100, marginLeft: 32 }}
                                source={{ uri: baseURL + plant.cropimg }}
                            />
                            : <></>
                        }
                        <Text style={{ fontSize: 19, fontWeight: 'bold', marginLeft: 15, bottom: 5 }}>#{plant.cropname}</Text>
                    </View>
                </ImageBackground>
            </View>
            <View style={{ minHeight: 115, backgroundColor: '#fff', alignItems: 'center' }}>
                <View style={{ width: '86%', }}>
                    <View style={{ alignItems: 'flex-end', width: '100%' }}>
                        <Text style={{ top: 10, color: '#716F6D' }} onPress={toPlant}>了解更多习性{'>'}</Text>
                    </View>
                    <Text style={{ width: '100%', fontSize: 15, marginTop: 15, marginBottom: 10 }}>
                        {plant.habit}
                    </Text>
                </View>
            </View>
        </View>
    )
    return (
        <View>
            <FlatList
                style={{ maxHeight: 750 }}
                // onRefresh={onRefresh}
                // refreshing={refreshing}
                ListHeaderComponent={Header}
                data={list}
                renderItem={({ item }) => {
                    return (
                        <View style={{
                            width: width,
                            minHeight: 150,
                            backgroundColor: '#FFFFFF',
                            paddingBottom: 5,
                            alignItems: 'center'
                        }}>
                            <View style={{
                                width: width, height: 70,
                                flexDirection: 'row',
                                paddingLeft: 20,
                                backgroundColor: 'rgba(203,242,203,0.7)',
                                alignItems: 'center',
                                justifyContent: 'space-between'
                            }}>
                                <View style={{ alignItems: 'center', flexDirection: 'row', }}>
                                    {item.avatar ?
                                        <Image style={{ width: 60, height: 60, borderRadius: 30 }} source={{ uri: baseURL + item.avatar }} />
                                        :
                                        <Image style={{ width: 60, height: 60, borderRadius: 30 }} source={require('../../../images/mine/1.jpg')} />
                                    }
                                    <View style={{ paddingLeft: 15 }}>
                                        <Text style={{ fontSize: 15.5 }}>{item.nickname}</Text>
                                        <Text style={{ fontSize: 13, color: '#bbb' }}>{moment(item.addtime).format("YYYY-MM-DD HH:mm")}</Text>
                                    </View>
                                </View>
                                <View style={item.userid == user.userid ? { marginRight: '5%' } : { display: 'none' }}>
                                    <AntDesign name="delete" size={24} color="#2A5F6b" onPress={() => deleteNews(item.newsid)} />
                                </View>
                            </View>
                            <View style={{ alignItems: 'center' }}>
                                <View style={{ width: width * 0.8, top: 15, minHeight: 40 }}>
                                    <Text>{item.newstext}</Text>
                                    {
                                        item.newsimg ?
                                            <View style={item.newsimg ? { flexDirection: 'row', marginTop: 10, marginBottom: 20 } : { display: 'none' }}>
                                                {
                                                    item.newsimg.map((item1) => {
                                                        return <Image key={item1.newsimgid} style={{ width: 110, height: 110, marginRight: 10 }} source={{ uri: baseURL + item1.newsimgs }} />
                                                    })
                                                }
                                            </View>
                                            : <></>
                                    }
                                </View>
                            </View>
                            <View style={{ flexDirection: 'row', justifyContent: 'flex-end' }}>
                                <View
                                    style={{ flexDirection: 'row', height: 35, alignItems: 'center', marginTop: 8 }}
                                    onStartShouldSetResponder={() => newsComment(item.newsid)}>
                                    {/* <MaterialCommunityIcons name="comment-processing-outline" size={27} color="black" /> */}
                                    <Image source={{ uri: baseURL + user.avatar }} style={{ width: 32, height: 32, borderRadius: 15, marginLeft: '3%', }}></Image>
                                    <TextInput
                                        style={styles.input}
                                        placeholder="说点什么吧……"
                                        editable={false}
                                    />
                                </View>
                            </View>
                        </View>
                    )
                }}
            // onEndReached={onEnd}
            // keyExtractor={item => item.id}
            />
            {list.length == 0 ?
                <View style={{
                    alignItems: 'center',
                    height: height * 0.1,
                    justifyContent: 'center',
                }}>
                    <Text style={{
                        fontSize: 18,
                        color: '#2A5F6b'
                    }}>
                        还没有人参与讨论哦
                    </Text>
                </View>
                : <></>}
        </View>
    )
}

const styles = StyleSheet.create({
    input: {
        width: '85%',
        height: 28,
        lineHeight: 28,
        color: '#2A5F69',
        paddingLeft: 8,
        fontSize: 15,
        backgroundColor: 'rgba(203,242,203,0.2)',
        marginLeft: 5,
        borderRadius: 7
    },
});

export default Topic
